<template>
    <div class="admin">
      <el-container>
        <el-aside width="300px">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu default-active="2" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-menu-item index="/user">
                  <i class="el-icon-user"></i>
                  <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="/role">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">角色管理</span>
                </el-menu-item>
                <el-menu-item index="/classity">
                  <i class="el-icon-s-operation"></i>
                  <span slot="title">分类管理</span>
                </el-menu-item>
                <el-menu-item index="/news">
                  <i class="el-icon-tickets"></i>
                  <span slot="title">资讯管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-container>
          <el-header>
            <div style="float: left">
              <span style="font-size: 20px">度小视后台管理</span>
            </div>
            <div style="font-size: 20px;float: right;height: 60px;width: 250px;">
              <span>欢迎：{{token}} &nbsp;&nbsp;&nbsp;</span>
              <span @click.prevent="exit()"><a style="text-decoration: none" href="">退出</a></span>
            </div>
          </el-header>
          <el-main>
            <router-view/>
          </el-main>
          <el-footer>
            <span style="font-size: 10px;color: gray">quanmin.baidu.com@copyright&nbsp;&nbsp;2021 - 2022</span>
          </el-footer>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    export default {
      name: "admin",
      data(){
        return{
          token: localStorage.getItem('admin'),
        }
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        exit(){
          alert("退出成功！")
          localStorage.removeItem("admin");
          this.$router.push('/')
        }
      },
    }
</script>

<style scoped>
  .el-header{
    color: #333;
    line-height: 60px;
  }
   .el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    border-right: 1px solid rgba(228,228,228,0.94);
    color: #333;
    height: 791px;
    line-height: 210px;
  }

  .el-main {
    background-color: #f5f5f5;
    color: #333;
  }

</style>
